<template>
  <div>
    <q-card v-if="!mini" class="q-pa-xs card-hoverable shadow-transition" @click="onClickEvent">
      <slot name="before"/>
      <div class="row q-col-gutter-sm items-center">
        <div class="col-xs-5 col-sm-4 col-md-3" v-if="cover">
          <div class="relative-position">
            <transition
              appear
              enter-active-class="animated backInDown"
              leave-active-class="animated backOutUp">
              <img v-lazy="cover" style="width: 100%; height: auto;"/>
            </transition>
            <div class="absolute-bottom-right"
                 style="margin: 8px 8px 8px 8px;">
              <slot name="image"/>
            </div>
          </div>
        </div>
        <div class="col-xs-7 col-sm-8 col-md-9">
          <div class="row q-col-gutter-xs">
            <div class="col-12 text-body2">{{ title }}</div>
            <div class="col-12 text-caption">{{ artist }}</div>
            <div class="col-12 text-caption text-grey">{{ author }}</div>
            <diff-icon-list class="col-12" :diffs="diffs" :size="24"/>
          </div>
        </div>
      </div>
    </q-card>
  </div>
</template>

<script>
  import DiffIconList from "./DiffIconList";

  export default {
    name: "SongCard",
    components: {DiffIconList},
    props: {
      title: {
        type: String
      },
      artist: {
        type: String
      },
      author: {
        type: String
      },
      id: {
        type: Number
      },
      cover: {
        type: String
      },
      diffs: {
        type: Array,
        default: null
      },
      mini: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      onClickEvent() {
        this.$emit('click');
      }
    }
  }
</script>

<style scoped>

</style>
